<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="560px"
    :before-close="handleClose"
    append-to-body
  >
    <template slot="title">
      <span>话术内容</span>
    </template>
    <div class="contentbox">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="flex aligncenter chat-item p-10"
      >
        <div class="chat-dot mr-10">
          <span class="dot">{{ index + 1 }}</span>
        </div>
        
        <template v-if="item.contentType == '文本'">
          <div class="textitem f-14">
            {{item.contentJson}}
          </div>
        </template>
        <template v-if="item.contentType == '图片'">
          <img
            src="https://foruda.gitee.com/images/1679673773341074847/178e8451_1766278.png"
            alt=""
            class="imgitem"
          />
        </template>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [
        // { id: 1, type: 1, text: "" },
        // { id: 2, type: 2, img: "" },
      ],
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    rowitem: {
      type: Object,
      default: null,
    },
  },
  created() {
    if (this.rowitem) {
      this.list = this.rowitem.contentList;
    }
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleCopy() {
      this.copy(this.text);
    },

    //选择表情包
    chooseEmoji(icon) {
      var elInput = document.getElementById("messageInput");
      var startPos = elInput.selectionStart;
      var endPos = elInput.selectionEnd;
      var text = elInput.value;
      if (startPos === undefined || endPos === undefined) {
        return;
      }
      var result =
        text.substring(0, startPos) + icon.name + text.substring(endPos);
      //重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + icon.name.length;
      elInput.selectionEnd = startPos + icon.name.length;
      elInput.value = result;
      this.text = result;
    },

    handleSubmit() {
      if (!this.text) {
        this.$message.warning("输入不能为空");
        return;
      }
      this.$emit("submit", this.text);
    },
  },
};
</script>
<style lang="scss" scoped>
.contentbox {
  max-height: 600px;
  overflow: auto;
}
.chat-item {
  min-height: 60px;
}
.chat-dot {
  width: 50px;
  text-align: center;
  .dot {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    background: #ddd;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
  }
}
.textitem {
  max-width: 370px;
  word-break: break-all;
  width: fit-content;
  padding: 6px 12px;
  color: #000;
  border: 1px solid #e9e9e9;
  border-radius: 5px;
}
.imgitem {
  display: block;
  max-width: 160px;
  max-height: 160px;
  cursor: pointer;
  border-radius: 5px;
}
</style>